<template>
  <view class="login-wrap">
    <public-header title="修改密码" :isBack="true"></public-header>
    <view class="login-dialog">
      <view class="title">
        修改密码
      </view>
      <view class="tips">
        商户账号密码唯一，修改后会对手机号码对应的所有门店同时生效
      </view>
      <view class="input-box">
        <view class="input-item">
          <view class="label">
            旧密码
          </view>
          <uni-easyinput type="password" primaryColor='#38C09E' v-model="loginForm.pwd" placeholder="请输入旧密码">
          </uni-easyinput>
          <!-- <input type="text" placeholder="请输入新的密码" class="input text-right" v-model="loginForm.npwd"> -->
        </view>
        <view class="input-item">
          <view class="label">
            新密码
          </view>
          <uni-easyinput type="password" primaryColor='#38C09E' v-model="loginForm.npwd" placeholder="请输入新密码">
          </uni-easyinput>
          <!-- <input type="text" placeholder="请输入新的密码" class="input text-right" v-model="loginForm.npwd"> -->
        </view>
        <view class="input-item">
          <view class="label">
            确认密码
          </view>
          <uni-easyinput type="password" primaryColor='#38C09E' v-model="loginForm.rpwd" placeholder="请再次输入新的密码">
          </uni-easyinput>
        </view>
        <!--      <view class="tips">
          <text class="text-red">*</text>
          <text>温馨提示：8-16个字符大小字母、数字及标点符号的其中两项</text>
        </view> -->
      </view>
      <view class="button-bar">
        <button class="button lg round full" @click="resetPwd">立即修改</button>
      </view>
    </view>
  </view>
</template>

<script>
  // import lockscreen from '@/common/mixins/lockscreen.js'
  export default {
    // mixins: [lockscreen],
    data() {
      return {
        loginForm: {
          pwd: "", //旧密码
          npwd: "", // 新密码
          rpwd: "", // 重复输入新密码
        },
      }
    },
    methods: {
      // 修改密码
      async resetPwd() {
        const url = `/sso/operate/srvsso_user_pwd_reset`
        const value = this.loginForm.npwd
        var par =
          /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&\<\>\?\:\"_+,\.\/-=\[\]\!\;\'*])[\da-zA-Z~!@#$%^&\<\>\?\:\"_+,\.\/-=\[\]\!\;\'*]{8,16}$/;
        if (!par.test(value)) {
          uni.showToast({
            title: "密码8-16位字符组成，必须包含字母、数字、特殊字符(@#$%^&<>?:\"_+,./-=[]!;')其中一个",
            icon: 'none'
          })
          return "密码8-16位字符组成，必须包含字母、数字、特殊字符(@#$%^&<>?:\"_+,./-=[]!;')其中一个";
        }
        if (!this.loginForm.npwd || this.loginForm.npwd.length < 8) {
          uni.showToast({
            title: '密码长度需要大于8个字符!',
            icon: 'none'
          })
          return
        }
        if (this.loginForm.npwd !== this.loginForm.rpwd) {
          uni.showToast({
            title: '两次输入的密码不一致!',
            icon: 'none'
          })
          return
        }
        const req = [{
          "serviceName": "srvsso_user_pwd_reset",
          "data": [{
            "pwd": this.loginForm.pwd,
            "newpwd": this.loginForm.npwd
          }]
        }]
        const res = await this.$http.post(url, req)
        if (res.data.state === 'SUCCESS') {
          uni.showModal({
            title: '提示',
            content: '密码修改成功，请重新登录',
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                uni.reLaunch({
                  url: '/pages/main/login/login'
                })
              }
            }
          })
        } else {
          uni.showModal({
            title: '提示',
            content: res.data.resultMessage,
            showCancel: false
          })
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .login-wrap {
    background-image: url('/static/images/login_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100vw;
    height: calc(100vh - var(--window-top) - var(--window-bottom));
    padding-top: 12.7rem;

    .login-dialog {
      margin: 0 auto;
      width: 75rem;
      height: 78.3rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4.7rem 0 5rem;
      background-color: #fff;
      border-radius: 5rem;

      .tips {
        text-align: center;
        margin: 2rem;
        color: #A6A6A6;
        font-size: $retail-font-size-sm;
      }

      .title {
        font-size: 4.2rem;
        line-height: 6rem;
        margin-bottom: 1.8rem;
        font-weight: 700;
      }

      .tab-list {
        display: flex;
        font-size: 3.2rem;
        width: 100%;
        padding: 0 3rem;
        padding: 0 10rem;

        .tab-item {
          flex: 1;
          text-align: center;
          padding: 1rem;
          border-bottom: .5rem solid #fff;

          &.active {
            color: $retail-color-primary;
            border-color: $retail-color-primary;
          }
        }
      }

      .input-box {
        flex: 1;
        padding: 0 10rem;

        .input-item {
          display: flex;
          align-items: center;
          width: 52.4rem;
          height: 8rem;
          margin-top: 2rem;
          border-radius: 1.2rem;
          border: 1px solid #E5E5E5;
          font-size: 4rem;
          padding: 0 0 0 3rem;
          color: $retail-color-primary;

          .label {
            font-size: $retail-font-size-sm;
            color: #333;
            min-width: 12rem;
          }

          .input {
            margin-left: 3rem;
            font-size: $retail-font-size-sm;
            flex: 1;
            color: #666;

            &.text-right {
              text-align: right;
            }
          }
        }
      }

      .check-box-bar {
        padding: 0 10rem;
        width: 100%;
        padding: 2rem;
        font-size: $retail-font-size-sm;
        padding: 2rem 10rem;

        ::v-deep .u-checkbox__icon-wrap {
          margin-right: 1.3rem;
        }

      }

      .tip-bar {
        // padding:  0 10rem;
        padding: 2rem 0 3rem;
        font-size: 2rem;
      }

      .button-bar {
        padding: 0 10rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .uni-eye {
    color: #999;

    &-active {
      color: $retail-color-primary;
    }
  }
</style>
